<template>
  <div class="head">
    <div :class="isShow?'add':'bition'" v-show="isExhibition" @click="exhibition">
      <div v-if="this.$store.state.SONG_lIST[index].picUrl" style="width: 300px;height: 300px"><img style="width: 100%"
                                                                                                    :src="this.$store.state.SONG_lIST[index].picUrl"
                                                                                                    alt=""></div>
      <div v-else style="width: 300px;height: 300px"><img style="width: 100%"
                                                          :src="this.$store.state.SONG_lIST[index].al.picUrl" alt="">
      </div>


      <div :class="isShow?'assets':'aee'"><img src="../assets/needle-ip6.png" alt=""></div>




    </div>
    <div v-show="!isExhibition" @click="exhibition" @touchmove="onScroll"
         style="width: 300px;height: 300px;margin:10px auto;overflow: scroll;text-align: center" ref="exhibition">
      <!--      <div class="scroolLyric" >-->
      <div v-for="(item,index) in arr1" :key="index" :class="index == indexActive?'active':''">
        {{ item.lyric }}
      </div>

      <div v-for="(item,index) in arr2" :key="index">
        {{ item }}
      </div>
      <!--      </div>-->

    </div>
    <audio :src="songUrl.url" controls ref="audio" @canplay="showLong" @timeupdate="timeupdate"></audio>
    <div style="display: flex;justify-content: space-around">
      <p>{{ value | global_filter('mm:ss') }}</p>
      <p>{{ maxLength | datefmt('mm:ss') }}</p>
    </div>
    <div style="width: 90%;margin-bottom: 20px">
      <van-slider v-model="value" @change="onChange" :max="maxLength"/>
    </div>
    <van-icon name="arrow-left" @click="lastSong"/>
    <van-icon v-if="isShow" name="play" @click="play"/>
    <van-icon v-else name="pause" @click="pause"/>
    <van-icon name="arrow" @click="nextSong"/>
  </div>
</template>

<script>

import {lyricSong, urlSong} from "@/api/http";
// import {Toast} from "vant";

export default {
  name: "SongDetail",
  watch: {
    index: {
      handler(newVal, oldVal) {
        console.log(newVal)
        console.log(oldVal)
        console.log(this.$store.state.SONG_lIST[newVal])
        this.getSng(this.$store.state.SONG_lIST[newVal].id)
      }
    },
    value: {
      handler(newVal) {
        for (let i = 0; i < this.arr1.length; i++) {
          if (newVal < this.arr1[i].time) {
            // if (i > 0) {
            this.indexActive = i - 1
            if (this.flag1) {
              let mid = this.$refs.exhibition.offsetHeight / 2
              this.$refs.exhibition.scrollTop = this.$refs.exhibition.children[this.indexActive].offsetTop - mid
            }
            break;
          }

        }
        // console.log(this.indexActive)
      }
    }
  },
  data() {
    return {
      flag1: true,
      indexActive: 0,
      lyicsList: [],
      arr: [],
      songUrl: [],
      value: 0,
      maxLength: '',
      isShow: true,
      index: 0,
      isExhibition: true,
      arr1: [],
      timer: null,
      arr2: [],
    }
  },
  mounted() {

  },
  methods: {
    getSng(id) {
      //歌词
      lyricSong(id).then((res) => {
        console.log(res)
        // console.log(res.lrc.lyric)
        // this.lyicsList = res.lrc.lyric
        this.lyicsList = this.format_lyrics(res.lrc.lyric)
      })
      // 歌曲url
      urlSong(id).then(res => {
        console.log(res)
        // this.songUrl= []
        this.songUrl = res.data[0]
        console.log(res)
      })
    },
    onScroll() {
      this.flag1 = false
      clearInterval(this.timer)
      this.timer = setTimeout(() => {
        console.log(1)
        this.flag1 = true
      }, 2000)
    },
    //处理歌词
    format_lyrics(lyric) {
      // this.arr1 = []
      console.log(lyric)
      console.log(lyric.split('\n'))
      this.arr = lyric.split('\n')
      // this.arr.forEach(item=>{
      //   // console.log(item)
      //   console.log(item.slice(item.indexOf(']')+ 1))
      //   this.arr2.push(item.slice(item.indexOf(']')+ 1))
      // })
      this.arr.forEach(item => {
        // console.log(item.slice(item.indexOf(']')+ 1))
        // 歌词
        let new_lry = item.slice(item.indexOf(']') + 1)
        // let arr1 = []
        if (new_lry) {
          //时间
          let time = item.slice(item.indexOf('['), item.indexOf(']') + 1)
          // console.log(time)
          // 处理时间
          let sec = parseInt(time.slice(time.indexOf(':') + 1, time.indexOf('.')))
          let min = parseInt(time.slice(time.indexOf('[') + 1, time.indexOf(':')))
          let timeAll = sec + min * 60
          console.log(timeAll)
          let obj = {
            time: timeAll,
            lyric: new_lry
          }
          console.log(obj)
          this.arr1.push(obj)
        }
        // console.log(arr1)
        // this.obj.lyric.push(new_lry)
        // return arr1
      })

    },
    exhibition() {
      this.isExhibition = !this.isExhibition
    },
    //shang
    lastSong() {
      this.index--
    },
    nextSong() {
      this.index++
    },
    play() {
      this.$refs.audio.play()
      this.isShow = !this.isShow
    },
    pause() {
      this.$refs.audio.pause()
      this.isShow = !this.isShow
    },
    timeupdate() {
      // console.log(this.$refs.audio.currentTime)
      this.value = this.$refs.audio.currentTime
    },
    onChange() {
      // Toast('当前值：' + value);
      this.$refs.audio.currentTime = this.value
    },

    showLong() {
      console.log(this.$refs.audio.duration)
      this.maxLength = this.$refs.audio.duration
    }
  },

  created() {
    // console.log(this.$route.query.id)


    console.log(this.$store.state.SONG_lIST)
    this.index = this.$store.state.SONG_lIST.indexOf(this.$store.state.SONG_lIST.find(item => {
      return item.id == this.$route.query.id
    }))
    // lyricSong(this.$route.query.id).then(res => {
    //   console.log(res)
    // })
    // // 歌曲url
    // urlSong(this.$route.query.id).then(res => {
    //   console.log(res)
    //   this.songUrl = res.data[0]
    // })
  }
}
</script>

<style scoped>
/deep/ .van-icon {
  font-size: 30px;

}

.active {
  color: hotpink;
  font-size: 20px;
}

.head {
  margin-bottom: 50px;
}

.assets {
  width: 100px;
  position: absolute;
  top: -5px;
  left: 46%;
  transition-duration: 1s;
  transform: rotate(-20deg);
  transform-origin: left top;
}

img {
  width: 100px;
}

.aee {
  width: 100px;
  position: absolute;
  top: -5px;
  left: 46%;
  transition-duration: 1s;
  transform: rotate(0deg);
  transform-origin: left top;
}

.bition {
  animation-name: donghua;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  transform-origin: center;
  animation-timing-function: linear;
  animation-fill-mode: backwards;
}
/*.addd{*/
/*  animation-play-state: running;*/
/*}*/
.add{
  animation-play-state: paused;
}

@keyframes donghua {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
</style>
